<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WeStudy</title>
    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="./css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script type="text/javascript" src="./style.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
    <script type="text/javascript" src="./js/showdown.min.js"></script>
    <link rel="dns-prefetch" href="//cdn.mathjax.org" />
    <script type="text/x-mathjax-config" src="./js/mathjax-config.js"></script>
    <script src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</head>

<body>
    <div class="border">

        <!-- 左边标签 -->
        <div class="left">
            <div class="navigation">
                <div class="logo">WeStudy</div>
                <a class="selected" href="javascript:;">
                    <span class="icon"><i class="fa fa-h-square"></i></span>
                    <span class="word">HomePage</span>
                </a>
                <a href="javascript:;">
                    <span class="icon"><i class="fa fa-object-group"></i></span>
                    <span class="word">Groups</span>
                </a>
                <a href="/classes">
                    <span class="icon"><i class="fa fa-graduation-cap"></i></span>
                    <span class="word">Classes</span>
                </a>
                <a href="javascript:;">
                    <span class="icon"><i class="fa fa-star"></i></span>
                    <span class="word">Star</span>
                </a>
                <a href="javascript:;">
                    <span class="icon"><i class="fa fa-envelope"></i></span>
                    <span class="word">Message</span>
                </a>
                <a href="javascript:;">
                    <span class="icon"><i class="fa fa-navicon"></i></span>
                    <span class="word">Details</span>
                </a>
                <a class="button is-primary" onclick="showTag()">
                    <i class="fa fa-share-alt"></i>
                    <span>Issue</span></a>
            </div>
        </div>

        <!-- 中间部分 -->
        <div class="center">
            <div class="top">
                <div class="title">
                    <div>HomePage</div>
                    <div class="user-online" th:if="${session.user} ne null">
                        <input type="file" id="headImageInput" style="display:none;">
                        <div class="user-head">
                            <a onclick="addHeadImage()">
                                <img th:src="${session.user.getHeadImage()}" id="userHeadImage">
                            </a>
                        </div>
                        <!-- 这边有待完善 -->
                        <a onclick="showUsenameInput()">
                            <div class="user-name" th:text="${session.user.getUserName()}" id="user-name-tag"></div>
                        </a>
                        <a class="logout" href="/logout">logout</a>
                    </div>
                    <span th:if="${session.user} eq null">
                        <a href="/signup" class="signup">Signup</a>
                        <span class="line">&nbsp;|&nbsp;</span>
                        <a href="/login" class="login">Login</a>
                    </span>
                </div>
                <!-- 这边是点击用户昵称之后显示的部分 -->
                <div class="user-image-input">
                    <div class="input-box">
                        <input type="text" placeholder="请输入昵称" id="updateUsername">
                        <a class="confirm" onclick="updateUserName()">确认</a>
                    </div>
                </div>
                <div class="content edit-tag" style="display: none;">
                    <div class="operation">
                        <a onclick="openDialog(0)"><i class="fa fa-image"></i></a>
                        <a onclick="openDialog(1)"><i class="fa fa-video-camera"></i></a>
                        <!--  附件包括mp3,zip,word等-->
                        <a onclick="openDialog(2)"><i class="fa fa-paperclip"></i></a>
                        <a><i class="fa fa-at"></i></a>
                        <a><i class="fa fa-eye" onclick="showSwitch(this)" id="eye"></i></a>
                        <a href="https://www.mdeditor.com/" target="_blank" class="question"
                            onmouseover="questionMouseOver(this)" onmouseout="questionMouseOut(this)">
                            <i class="fa fa-question"></i>
                        </a>
                        <a class="tip">How to use markdown?</a>
                        <a class="tag-top" onclick="tagTop()"><i class="fa fa-eject"></i></a>
                        <a class="button is-primary" onclick="issue()">
                            <i class="fa fa-share-alt"></i>
                            <span>Issue</span></a>
                    </div>
                    <div class="up-contain">
                        <input type="text" placeholder="此处添加标题" class="issue-title">
                        <textarea id="md-area" onkeyup=mdSwitch() class="write" th:text="${write}"
                            placeholder="记录每一天的心得"></textarea>
                    </div>
                    <div class="show" id="show">
                        <div id="show-area"></div>
                    </div>
                </div>
            </div>
            <!-- 图片上传对话框 -->
            <div class="md-upload" style="display:none;">
                <div class="md-dialog">
                    <div class="dialog-top">
                        <h3>图片上传</h3>
                    </div>
                    <div class="dialog-content">
                        <div class="warning">仅支持 JPG、GIF、PNG 格式的本地图片</div>
                        <div class="desc">请输入图片地址或点击按钮上传</div>
                        <div class="input-url">
                            <a class="icon" onclick="addFile(0)"><i class="fa fa-image btn"></i></a>
                            <input type="file" style="display: none;" name="file" accept="image/*" class="upload-btn">
                            <input class="input fileAddress" type="text" name="input" id="fileAddressOfImage"
                                placeholder="http://westudy.ltd/image.jpg">
                        </div>
                    </div>
                    <div class="dialog-bottom">
                        <a class="button" onclick="cancelUpload()">取消</a>
                        <a class="button is-primary" onclick="insert()">插入</a>
                    </div>
                </div>
            </div>
            <!-- 视频上传对话框 -->
            <div class="md-upload" style="display:none;">
                <div class="md-dialog">
                    <div class="dialog-top">
                        <h3>视频上传</h3>
                    </div>
                    <div class="dialog-content">
                        <div class="warning">仅支持 MP4格式的视频,视频最大为10M</div>
                        <div class="desc">请输入视频地址或点击按钮上传</div>
                        <div class="input-url">
                            <a class="icon" onclick="addFile(1)"><i class="fa fa-file-video-o btn"></i></a>
                            <input type="file" style="display: none;" name="file" accept="video/*" class="upload-btn">
                            <input class="input fileAddress" type="text" name="input" id="fileAddressOfVideo"
                                placeholder="http://westudy.ltd/video.mp4">
                        </div>
                    </div>
                    <div class="dialog-bottom">
                        <a class="button" onclick="cancelUpload()">取消</a>
                        <a class="button is-primary" onclick="insert()">插入</a>
                    </div>
                </div>
            </div>
            <!-- 附件上传对话框 -->
            <div class="md-upload" style="display:none;">
                <div class="md-dialog">
                    <div class="dialog-top">
                        <h3>附件上传</h3>
                    </div>
                    <div class="dialog-content">
                        <div class="warning">仅支持 doc、xls、ppt 、pdf以及zip格式的附件,附件最大为10M</div>
                        <div class="desc">请输入附件地址或点击按钮上传</div>
                        <div class="input-url">
                            <a class="icon" onclick="addFile(2)"><i class="fa fa-paperclip btn"></i></a>
                            <input type="file" style="display: none;" name="file"
                                accept="application/msword, application/pdf,application/vnd.ms-powerpoint,	application/vnd.ms-excel,	application/zip"
                                class="upload-btn">
                            <input class="input fileAddress" type="text" name="input" id="fileAddressOfAppendix"
                                placeholder="http://westudy.ltd/file.zip">
                        </div>
                    </div>
                    <div class="dialog-bottom">
                        <a class="button" onclick="cancelUpload()">取消</a>
                        <a class="button is-primary" onclick="insert()">插入</a>
                    </div>
                </div>
            </div>
            <div class="contain">
                <!--下面的item用来循环-->
                <form method="get" th:each="invitation:${invitations}">
                    <div class="item">
                        <div class="item-top">
                            <div class="head-img">
                                <img th:src="${invitation.headImage}">
                            </div>
                            <div class="author">
                                <div class="username" th:text="${invitation.userName}"></div>
                                <div class="createTime" th:text="${#dates.format(invitation.createTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                            </div>
                            <div class="hide"><i class="fa fa-chevron-down"></i></div>
                            <div class="star">
                                <input type="text" th:value="${invitation.userId}" style="display:none;">
                                <a class="button is-primary" onclick="starUser(this)" 
                                th:classappend="${starUserIds !=null&&starUserIds.contains(invitation.userId)} ? 'orange' : 'green'">
                                    <i class="fa" th:classappend="${starUserIds !=null&&starUserIds.contains(invitation.userId)} ? 'fa-check' : 'fa-star'"></i>
                                    <span th:text="${starUserIds !=null&&starUserIds.contains(invitation.userId)} ? '已关注' : '关注'"></span>
                                </a>
                            </div>
                        </div>
                        <a class="item-center" th:href="${invitation.htmlUrl+'?invitationId='+invitation.invitationId}"
                            target="_blank">
                            <div class="item-title" th:text="${invitation.title}">
                            </div>
                            <div class="image">
                                <img th:src="${invitation.previewImageUrl}">
                            </div>
                        </a>
                        <div class="item-bottom">
                            <input type="text" th:value="${invitation.invitationId}" style="display:none;"
                                class="invitation-id">
                            <!-- 这边有待完善 -->
                            <a class="like" onclick="like(this)"
                                th:classappend="${likeInvitationIds !=null&&likeInvitationIds.contains(invitation.invitationId)} ? 'red' : 'grey'">
                                <i class="fa fa-heart"></i>
                                <span class="num like-num" th:text="${invitation.likeNumber}"></span>
                            </a>
                            <a class="star" onclick="star(this)"
                               th:classappend="${starInvitationIds !=null&&starInvitationIds.contains(invitation.invitationId)} ? 'yellow' : 'grey'">
                                <i class="fa fa-star"></i>
                                <span class="num star-num" th:text="${invitation.starNumber}"></span>
                            </a>
                            <a class="storey" th:href="${invitation.htmlUrl+'?invitationId='+invitation.invitationId}" target="_blank"
                               th:classappend="${storeyInvitationIds !=null&&storeyInvitationIds.contains(invitation.invitationId)||commentInvitationIds!=null&&commentInvitationIds.contains(invitation.invitationId)} ? 'blue' : 'grey'"><i
                                    class="fa fa-comments"></i><span class="num"
                                    th:text="${invitation.commentNumber}"></span></a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="right">

            <div class="rank-list">
                <header class="rank-header"><span class="name">排行榜</span></header>
                <form class="rank-wrap"  method="get" th:each="invitation,invitationStatus:${invitations}"
                      onmouseover="rankInvitationMouseOver(this)" onmouseout="rankInvitationMouseOut(this)">
                    <div class="rank-number" th:text="${invitationStatus.index+1}"></div>
                    <div class="pre-img" th:if="${invitation.previewImageUrl!=null&&invitation.previewImageUrl!=''}"><img th:src="${invitation.previewImageUrl}"></div>
                    <a target="_blank" class="link" 
                    th:href="${invitation.htmlUrl+'?invitationId='+invitation.invitationId}">
                        <p th:title="${invitation.title}" class="p-title" th:text="${invitation.title}"></p>
                    </a>
                    <div class="details">
                        <div class="like"><i class="fa fa-heart"></i><span th:text="${invitation.likeNumber}"></span></div>
                        <!-- <div class="star"><i class="fa fa-star"></i><span th:text="${invitation.starNumber}"></span></div>
                        <div class="comment"><i class="fa fa-comments"></i><span th:text="${invitation.commentNumber}"></span></div> -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>